<script setup lang="ts">
import { queryList } from "@/api/def/tabledata";
import type { FormDesignerComponents, MultiTagsItem, FormItemPerm } from "../FormComponentMixin";
import { isReadonly } from "../FormItem";
import DataPicker from "@/views/def/table/components/dataPicker.vue";
import { inject, ref, computed, onMounted, watchEffect } from "vue";

const props = defineProps({
  type: {
    type: String,
    default: ""
  },
  mode: {
    type: String,
    default: "normal" //组件模式，free设计模式，normal 编辑模式, read 阅读模式，disable 禁用模式
  }
});

const _value = defineModel<any>();
const config = defineModel<FormDesignerComponents>("config");
const perm = inject<Array<FormItemPerm>>("perm");
const selections = ref<MultiTagsItem[]>([]);
const pickerVisible = ref(false);
const dataPickerRef = ref(null);

const disabled = computed(() => {
  if (props.mode === "disable" && isReadonly(perm, config.value.code)) {
    return true;
  }
  return false;
});

const readonly = computed(() => {
  if (props.mode === "read" || isReadonly(perm, config.value.code)) {
    return true;
  }
  return false;
});

function selectOk() {
  const selectionsList = dataPickerRef.value.getSelections();
  selections.value = selectionsList.map(item => {
    return {
      id: item[config.value.props.idColumnKey],
      text: item[config.value.props.textColumnKey]
    };
  });
  _value.value = selections.value
    .map(item => {
      return item.id;
    })
    .join(",");
  pickerVisible.value = false;
}

const handleReduce = index => {
  selections.value.splice(index, 1);
  _value.value = selections.value
    .map(item => {
      return item.id;
    })
    .join(",");
};

onMounted(() => {});

watchEffect(() => {
  console.log(_value.value, selections.value);
  if (_value.value && selections.value.length === 0) {
    queryList({
      tableId: config.value.props.sourceTableId,
      id: _value.value
    }).then(res => {
      if (res.code === 200 && res.data) {
        selections.value = res.data.map(item => {
          return {
            id: item[config.value.props.idColumnKey],
            text: item[config.value.props.textColumnKey]
          };
        });
      }
    });
  }
});
</script>

<template>
  <div style="display: flex; align-items: center">
    <el-button icon="plus" round @click="pickerVisible = true" :disabled="disabled" />
    <div class="data-items">
      <el-tag
        v-for="(tag, index) in selections"
        :key="tag.id"
        :closable="!readonly"
        type="primary"
        @close="handleReduce(index)"
        style="margin-right: 10px"
      >
        {{ tag.text }}
      </el-tag>
    </div>
    <el-text class="data-placeholder" v-if="!_value">{{ config.props.placeholder }}</el-text>
    <CommonDialog
      v-model="pickerVisible"
      :border="true"
      :show-footer="true"
      title="数据选择"
      @cancel="pickerVisible = false"
      @closed="pickerVisible = false"
      @ok="selectOk"
    >
      <DataPicker
        ref="dataPickerRef"
        :multiple="config.props.multiple"
        :sourceTableId="config.props.sourceTableId"
        :idColumnKey="config.props.idColumnKey"
        :textColumnKey="config.props.textColumnKey"
      />
    </CommonDialog>
  </div>
</template>

<style scoped>
.data-placeholder {
  margin-left: 10px;
  color: var(--el-text-color-placeholder);
}
.data-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  margin-left: 10px;
}
</style>
